<template>
	<div id="tagMenu">
		<el-scrollbar class="scr" ref="scrollMenuRef">
			<div class="tagCon">
				<div class="el-tg" :class="'/homeIndex'==$route.path?'activeColor':''" @click="toIndex"
					@contextmenu.prevent="openMenu($event,'/homeIndex')">
					<i class="icon-head" :class="'/homeIndex'==$route.path?'active':''"></i>
					首页
					<!-- <span class="el-icons"><i class="el-icon-close"></i></span> -->
				</div>
				<div class="el-tg " v-for="(item,index) in tagMenuList" :class="isAddColor==item.path?'activeColor':''"
					@click="changeRoute(index,item)" v-if="tagMenuList.length!=0"
					@contextmenu.prevent="openMenu($event,item,index)">
					<i class="icon-head" :class="isAddColor==item.path?'active':''"></i>{{item.meta.title}}<span
						class="el-icons" @click.stop="closeTag(index,item)"><i class="el-icon-close"></i></span>
					<!-- v-if="index==flag?'show':''" -->
					<!-- 出现第一个问题一开始总有一个是显示的，就算没有右键，将默认值改成-1 -->
					<!-- -->
				</div>
				<!-- :class="index==flag?'show':'hide'" -->
				<ul class="ullist" v-show="visible" :style="{left:left+'px',top:top+'px'}">
					<li @click="refeshPage('/homeIndex')">刷新</li>
					<li @click="closeCurrentPage" v-show="isShowMe">关闭</li>
					<li @click="closeOther('/homeIndex')">关闭其它</li>
					<li @click="closeAll">关闭所有</li>
				</ul>
			</div>

		</el-scrollbar>



	</div>

</template>

<script>
	export default {
		data() {
			return {
				// 存放所有的标签名称
				tagMenuList: [],
				// 使用路由路径来判断是否相同,来确定是否染色,默认首页
				isAddColor: '/homeIndex',
				// 判断右键菜单是否进行显示,默认为false
				visible: false,
				top: 0,
				left: 0,
				//页面的详细情况
				pageItem: '',
				// 页面的下标
				pageIndex: '',
				// 是否显示关闭的这一栏
				isShowMe: true,

			}
		},
		// 接收传递过来的数据
		props: ["parentMsg"],
		methods: {
			// 添加数据
			addData() {
				// 去重，好吧。。
				if (this.$route.fullPath !== "/homeIndex") {
					// 数组进行去重处理	
					this.tagMenuList.push(this.parentMsg)
					//使用reduce对数组对象进行去重。。。
					var test = {}
					let open = this.tagMenuList.reduce((cur, next) => {
						test[next.path] ? '' : test[next.path] = true && cur.push(next);
						return cur
					}, [])
					// console.log("我是去重后的数组", open)
					// 再次赋值
					this.tagMenuList = open
					this.isAddColor = this.parentMsg.path
					//使用set去重
					// this.tagMenuList = new Set(this.tagMenuList)
					// 使用arrayfrom将对象转换成数组
					// this.tagMenuList = Array.from(this.tagMenuList)
					// 添加颜色，good。
					// this.isAddColor=!this.isAddColor

					//？解决刷新样式进行显示

				} else {
					this.isAddColor = "/homeIndex"

				}
			},

			/* 
			 问题：点击跳转相同的路由会报错。
			 解决：const originalPush = Router.prototype.push;
			Router.prototype.push = function push(location) {
			return originalPush.call(this, location).catch(err => err);
			 */
			changeRoute(index, item) {
				// 这里进行路由的跳转顺带着颜色的改变
				console.log("点击事件触发了路由", item)
				// console.log(this.$router)

				this.$router.push({
					path: item.path
				})

			},
			toIndex() {
				// 跳转
				this.$router.push("/")

			},


			closeTag(index, item) {
				/* 这里进行标签的删除
				删除之后不仅要改变样式还要改变路由进行跳转
				还得考虑如果不是删除自己的话那么样式和路由是不需要进行跳转的
				？怎么判断删除的这个是不是当前页面的路由,由于这个外面也有点击事件会产生冒泡，阻止就好了。
				解决：通过当前页面的路径和我点击的项目的路径进行比较
			
				 
				 */
				if (this.$route.path == item.path) {
					console.log("我是当前页面")
					// 这个删除的话路由和样式进行重新改变 
					this.tagMenuList.splice(index, 1)
					// 让右边第一个的路由进行跳转和样式改变
					let leg = this.tagMenuList.length
					// console.log(this.tagMenuList[leg-1])
					// 当长度为1的还需要进行判断和处理
					if (this.tagMenuList.length >= 1) {
						this.$router.push({
							path: this.tagMenuList[leg - 1].path
						})
					}

				} else {
					console.log("我不是当前页面", item.path, this.$route.path)
					// 只进行删除，路由和样式都不改变
					this.tagMenuList.splice(index, 1)

				}

				// 如果数组的长度变为零，也就是数组被删除完毕那么就让首页进行显示

				if (this.tagMenuList.length == 0) {
					this.$router.push("/")
					// 样式进行改变
					this.isAddColor = this.$route.path

				}

			},
			// 右键菜单事件
			openMenu(event, item, index) {

				// console.log(event)
				console.log("我是首页的item", item)

				if (item == "/homeIndex") {
					// 是否少一栏
					this.isShowMe = false
					// 刷新功能单独再写
					// this.$router.push("/")

				} else {
					// 是否多一栏关闭
					this.isShowMe = true
					this.pageItem = item
					this.pageIndex = index
					console.log(index)
					console.log(item)

				}
				var x = event.pageX;
				var y = event.pageY;

				this.top = y;
				this.left = x;

				this.visible = true;

			},
			closeMenu() {
				this.visible = false;
			},

			refeshPage(e) {
				// 刷新页面,这个item可以获取页面的路径
				console.log("我是刷新的路径", this.pageItem)
				console.log("我是刷新的e", e)
				// 如果来自homeIndex的话那么就单独处理
				if (e == this.pageItem) {
					this.$router.push({})

				} else {
					// 并且选中当前页面
					this.$router.push({
						path: this.pageItem.path,

					})
					// 然后刷新
					if (this.$route.path == this.pageItem.path) {
						this.$router.push({
							path: "/redirect",
							query: {
								path: this.$route.path
							}
						})
						// 补上颜色
						this.isAddColor = this.pageItem.path
					}


				}

			},
			closeCurrentPage() {
				// 关闭当前页面
				// 也就是清除删除数组
				this.tagMenuList.splice(this.pageIndex, 1)

			},
			closeOther(e) {
				if (e == this.pageItem) {
					// 直接删除其它的页面
					this.closeAll()
				} else {
					// 关闭其它,保留自己删除其它的
					this.$router.push({
						path: this.pageItem.path
					})
					// 先删除右边的，再删除左边的
					this.tagMenuList.splice(this.pageIndex + 1)
					// console.log(this.tagMenuList)
					// 再来左边 的
					this.tagMenuList.splice(0, this.pageIndex)
				}

			},
			closeAll() {
				// 关闭所有
				// 将数据清空
				this.tagMenuList.length = 0
				//再将路由跳转回首页
				this.$router.push("/")

			},


			// el-scrollbar内滚动条滚动时，打印滚动条向下滚动的距离
			scrollMenu() {
				console.log(this.$refs.scrollMenuRef.wrap.scrollLeft)
				
			},
			scrollFunc(e) {
				
				// console.log(this.$refs.scrollMenuRef.wrap.scrollLeft,"haha")
				e = e || window.event;
				if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
					if (e.wheelDelta > 0) { //当滑轮向上滚动时
						// alert("滑轮向上滚动");
						// 向上滚动的时候将上面的距离增加
						this.$refs.scrollMenuRef.wrap.scrollLeft+=10
						
					}
					if (e.wheelDelta < 0) { //当滑轮向下滚动时
						// alert("滑轮向下滚动");
						this.$refs.scrollMenuRef.wrap.scrollLeft-=10
					}
				} else if (e.detail) { //Firefox滑轮事件
					if (e.detail > 0) { //当滑轮向上滚动时
						// alert("滑轮向上滚动");
					}
					if (e.detail < 0) { //当滑轮向下滚动时
						// alert("滑轮向下滚动");
					}
				}


			}





		},
		mounted() {
			// 监听浏览器/页面滚动条的滚动
			this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu)
			// 注册鼠标滚轮事件
			window.addEventListener('mousewheel', this.scrollFunc);
		},
		watch: {
			// 监听props里面的数据
			parentMsg() {
				console.log('哈哈')
				if (this.parentMsg.path == '/redirect') {
					console.log("不更新")
				} else {
					console.log(this.parentMsg, "绝望")
					this.addData()
					console.log("我是tagmenu", this.tagMenuList)
				}



			},
			visible(value) {
				if (value) {
					document.body.addEventListener('click', this.closeMenu)
				} else {
					document.body.removeEventListener('click', this.closeMenu)
				}
			}




			/* $route(to,from) {
				console.log(to)
				if (to.fullPath !== "/homeIndex") {
					// 数组进行去重处理	
					this.tagMenuList.push(to.meta.title)
					//使用set去重
					this.tagMenuList = new Set(this.tagMenuList)
					//使用arrayfrom将对象转换成数组
					this.tagMenuList = Array.from(this.tagMenuList)
				}
				console.log(this.tagMenuList)
			} */

		}


	}
</script>

<style>
	/* 滚动的事件 */






	.el-tg {
		width: 100px;
		height: 30px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: #283443 1px solid;
		color: #495060;
		font-size: 12px;
		margin-left: 8px;
		/* position: relative; */


	}

	.el-tg:hover {
		cursor: pointer;
	}

	.tagCon .activeColor {
		background-color: #42B983;
		color: #FFFFFF;

	}

	.el-tg .active {
		display: inline-block !important;
	}

	/* 菜单的显示和隐藏 */
	.el-tg .show {
		/* 显示 */
		display: block !important;
	}

	.el-tg .hide {
		display: none !important;
	}

	.scr {
		width: 100%;
		height: 100%;

	}

	/deep/.el-scrollbar__wrap {
		/* overflow-x: scroll; */
		overflow-y: hidden !important;
		/* overflow-x: hidden; */
	}

	.tagCon {

		/* 设置固定的宽度 */

		/* width: 1000px; */
		min-width: 500px;
		height: 100%;
		display: flex;
		flex-direction: row;
		/* flex-wrap: nowrap; */
		white-space: nowrap;
		overflow: hidden;
		/* position: relative; */
	}

	#tagMenu {
		overflow: hidden;
		width: 100%;
		height: 40px;

		/* display: flex; */
	}


	/* 图标处理 */

	.el-icons {
		width: 16px;
		height: 16px;
		/* border: #000 1px solid; */
		border-radius: 50%;
		text-align: center;
		line-height: 16px;
		font-size: 8px;

	}

	/* 鼠标悬停手掌 */
	.el-icons:hover {
		cursor: pointer;
		background-color: #CCCCCC;
		color: #FFFFFF;
	}


	.icon-head {
		width: 10px;
		height: 10px;
		border: #283443 1px solid;
		border-radius: 50%;
		background-color: #FFFFFF;
		/* display: inline-block; */
		display: none;
	}

	/* 右键出现的弹出框 */
	.ullist {
		width: 70px;
		height: 120px;
		background-color: #FFFFFF;
		border: #aaffff 1px solid;
		list-style: none;
		/* position: absolute; */
		position: fixed;
		z-index: 99999;
		top: 90px;
		padding: 0 !important;
		color: #000;
		/* 首先默认将其隐藏 */
		/* display: none; */
	}

	.ullist li {
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
	}

	/* 鼠标悬停*/
	.ullist li:hover {
		background-color: #CCCCCC;
	}

	/*传递数据 */
</style>
